<template>
	<view class="page">
		<topVue></topVue>
		<view class="text-center" style="font-weight: 600; font-size: 46rpx; padding-top: 30rpx; line-height: 1;">创建账号</view>
		<!-- <view class="inpVue margin60 flex align-center padding-row30">
			<image src="../../static/user.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="text" placeholder="请输入用户名" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="name"/>
		</view> -->
		
		<view class="inpVue margin80 flex align-center padding-row30">
			<image src="../../static/phone.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="text" placeholder="请输入手机号" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="phone"/>
		</view>
		<view class="inpVue margin20 flex align-center padding-row30 relative">
			<image src="../../static/code.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="text" placeholder="请输入验证码" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="code"/>
			<view class="code absolute" @click="sendFun()">{{text }}</view>
		</view>
		<view class="inpVue margin20 flex align-center padding-row30">
			<image src="../../static/lock.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="password" placeholder="输入登录密码" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="pwd"/>
		</view>
		<view class="inpVue margin20 flex align-center padding-row30">
			<image src="../../static/lock.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="password" placeholder="确认登录密码" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="rePwd"/>
		</view>
		<view class="inpVue margin20 flex align-center padding-row30">
			<image src="../../static/inviteCode.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="text" placeholder="输入推广码(选填)" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="inviteCode"/>
		</view>
		
		<view class="loginBtn margin50" @click="registerFun()">注册</view>
		
		<view class="checkVue margin20 flex-center align-center" style="background: transparent;">
			<u-checkbox v-model="checked" active-color="#1CC289">我已阅读并同意<text @click.stop="$tools.route('../person/service')">《用户协议》</text> 和 <text @click.stop="$tools.route('../person/privacy')">《隐私政策》</text></u-checkbox>
		</view>
		
		<view class="botVue text-center">
			<text style="color: #4B5563;">已有账号?</text>
			<text style="color: #1CC289; font-weight: 600; padding-left: 10rpx;" @click="$tools.route('./login')">去登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				name: "",
				phone: "",
				code: "",
				pwd: "",
				rePwd: "",
				text: "获取验证码",
				isSend: false,
				checked: true,
				inviteCode: "",
			}
		},
		methods: {
			async registerFun(){
				if(!this.$u.test.mobile(this.phone)) return this.$u.toast("请输入正确手机号")
				if(!this.$u.test.code(this.code, 4)) return this.$u.toast("请输入正确验证码")
				if(!this.pwd) return this.$u.toast("请输入登录密码")
				if(this.pwd!=this.rePwd) return this.$u.toast("两次密码输入不一致")
				if(!this.checked) return this.$u.toast("请阅读并同意协议与条款")
				const result = await this.$request("/app-api/member/auth/register", "POST", {
					mobile: this.phone,
					inviteCode: this.inviteCode,
					password: this.pwd,
					code: this.code
				})
				console.log(result)
				if(result.code===0) {
					this.$u.toast("注册成功")
					setTimeout(()=>{
						uni.navigateTo({
							url: "./login"
						})
					}, 1000)
				}else{
					this.$u.toast(result.msg)
				}
			},
			
			// 发送验证码
			async sendFun(){
				if(this.isSend) return
				this.isSend = true;
				if(!this.$u.test.mobile(this.phone)) return this.$u.toast("请输入正确手机号")
				const result = await this.$request("/app-api/member/auth/send-sms-code", "POST", {
					mobile: this.phone,
					scene: 1
				})
				console.log(result)
				if(result.code===0) {
					this.$u.toast("验证码已发送")
					let count = 60;
					this.text = `${count}s`;
					let timer = setInterval(() => {
						count--;
						this.text = `${count}s`;
						if (count === 0) {
							clearInterval(timer);
							this.text = '获取验证码';
							this.isSend = false;
						}
					}, 1000);
				}else{
					this.isSend = false;
					this.$u.toast(result.msg)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.checkVue {
		width: 100%;
		text {
			color: #1CC289;
		}
	}
	.inpVue {
		width: 690rpx;
		height: 88rpx;
		background: #F3F4F6;
		border-radius: 16rpx;
		input {
			flex: 1;
			height: 88rpx;
			color: #333;
			font-size: 28rpx;
			padding-left: 20rpx;
		}
		.loginType {
			color: #1CC289;
		}
		.forget {
			color: #6B7280;
		}
		.code {
			width: 200rpx;
			height: 88rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			top: 0;
			right: 0;
			border-radius: 0 16rpx 16rpx 0;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
		}
		text {
			color: #1CC289;
		}
	}
	
	.loginBtn {
		width: 690rpx;
		height: 92rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
		border-radius: 15rpx;
		line-height: 92rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
	}
	
	.botVue {
		width: 100%;
		height: 120rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>